<template>
  <div class="edit">
    <my-header hasLeft="true" title="编辑资料" @changeBack="toBack" />
    <div class="edit-warp">
      <div class="ava-box">
        <div class="avatar">
          <img src="../../static/img/3.jpg" alt="">
          <span class="iconfont icon-tubiaozhizuo-1"></span>
          <input type="file">
        </div>
        <p>点击更换头像</p>
      </div>
      <div class="edit-box">
        <div class="edit-item">
          <span class="label">名字</span>
          <span>名字<span class="icon">→</span></span>
        </div>
        <div class="edit-item">
          <span class="label">抖音号</span>
          <span>1213141516<span class="icon">→</span></span>
        </div>
        <div class="edit-item">
          <span class="label">简介</span>
          <span>越努力越幸运<span class="icon">→</span></span>
        </div>
        <div class="edit-item">
          <span class="label">学校</span>
          <span>点击设置<span class="icon">→</span></span>
        </div>
        <div class="edit-item">
          <span class="label">性别</span>
          <span>男<span class="icon">→</span></span>
        </div>
        <div class="edit-item">
          <span class="label">生日</span>
          <span>1999-09-09<span class="icon">→</span></span>
        </div>
        <div class="edit-item">
          <span class="label">地区</span>
          <span>沙特阿拉伯<span class="icon">→</span></span>
        </div>
        <div class="edit-item">
          <span class="label">个性</span>
          <span>没有个性<span class="icon">→</span></span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import myHeader from '../../components/header/myHeader'
export default {
  components:{
    myHeader
  },
  methods: {
    toBack(){
      this.$router.push('/me');
    }
  }
}
</script>
<style scoped>
.edit{
  background-color: #101821;
}
.edit-warp{
  padding: 0 10px;
  box-sizing: border-box;
}
.ava-box{
  color: #cccccc;
  text-align: center;
  padding: 20px;
}
.avatar{
  position: relative;
}
.avatar img{
  height: 100px;
  width: 100px;
  border-radius: 50%;
  margin-bottom: 16px;
  opacity: 0.5;
}
.avatar .iconfont{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 26px;
  color: #ffffff;
}
.avatar input{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}
.edit-box{
  border-top: 1px solid #292831;
  color: #cccccc;
}
.edit-item{
  display: flex;
  justify-content: space-between;
  line-height: 60px;
}
.edit-item .label{
  color: #ffffff;
}
.edit-item .icon{
  margin-left: 10px;
}
</style>